class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = this.getTemplate();
  }

  getStyles() {
    return `
      <style>
        .mahd-extension__area {
          position: fixed;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          pointer-events: none;
        }
        .img-icon {
          display: none;
          position: fixed;
          bottom: 20px;
          right: 20px;
          z-index: 9999999999;
          transition: width linear 0.1s, height linear 0.1s;
          cursor: pointer;
        }

        .img-explain {
          display: none;
          position: absolute;
          left: -24px;
          bottom: -24px;
          cursor: pointer;
          width: 24px;
          height: 24px;
          opacity: 0;
          z-index: 100000000;
          transition: opacity 0.3s linear;
          background-color: transparent;
        }

        .img-explain.visible {
          opacity: 1;
          pointer-events: auto;
        }
      </style>
    `;
  }

  getTemplate() {
    return `
      ${this.getStyles()}
      <div class="mahd-extension__area" id="mahd-extension__area"></div>
      <div>
        <img
          id="imgIcon"
          class="img-icon"
          src=""
          width="50px"
          height="50px"
          alt="icon"
          draggable="false"
        />
        <img
          id="imgExplain"
          class="img-explain"
          src=""
          alt="explain"
        />
      </div>
    `;
  }
}

// 定义自定义元素
window.customElements.define('mahd-web-extension', MyElement);

// 创建并插入自定义元素
const myElement = document.createElement('mahd-web-extension');
document.body.appendChild(myElement);